<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="./index.css" />
</head>

<body>
  <div class="wrap">
    <div class="title">学生系统</div>
    <div id="form">
      <p>姓名<input id="username" type="text" value="张三123" /></p>
      <p>年龄<input id="age" type="text" value="21" /></p>
      <p>
        性别
        <select id="gender">
          <option>男</option>
          <option>女</option>
          <option>你猜</option>
        </select>
      </p>
      <p>
        <input type="button" value="添加" id="addBtn" />
        <input type="button" value="排序" id="sortBtn" />
      </p>
    </div>
    <table id="table">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>

  <script>
    var usernameEle = document.querySelector("#username");
    var ageEle = document.querySelector("#age");
    var sexEle = document.querySelector("#gender");
    var tbodyEle = document.querySelector("tbody");
    // 获取添加按钮
    var addEle = document.querySelector("#addBtn");

    var sort = document.getElementById("sortBtn");
    var arr = [];

    addEle.onclick = function () {
      // 点击添加按钮的时候执行函数
      var username = usernameEle.value;
      // console.log(username);
      var age = ageEle.value;
      var sex = sexEle.value;
      // console.log(username,age,sex);
      // var trEle = document.createElement("tr"); //是一个对象
      tbodyEle.innerHTML +=
        "<td>" +
        username +
        "</td><td>" +
        age +
        "</td><td>" +
        sex +
        "</td><td class='del'>删除</td>";

      //创建一个对象存储数据
      var obj = {
        name: username,
        age: age,
        sex: sex,
      };
      console.log(obj);
      // 创建一个数组push存入对象obj
      arr.push(obj);
      console.log(arr);
      //点击排序按钮时进行排序
      sort.onclick = function () {
        tbodyEle.innerHTML = "";
        arr.sort(function (a, b) {
          return a.age - b.age;
        });
        getreplay(arr);
        var delEles = document.querySelectorAll(".del");
        // console.log(delEles);
        for (let i = 0; i < delEles.length; i++) {
          delEles[i].onclick = function () {
            this.parentNode.remove();
          };
        }
      };
      // console.log(arr);
      //创建函数显示
      function getreplay() {
        tbodyEle.innerHTML = "";
        arr.forEach(function (item) {
          tbodyEle.innerHTML +=
            "<td>" +
            item.name +
            "</td><td>" +
            item.age +
            "</td><td>" +
            item.sex +
            "</td><td class='del'>删除</td>";
        });
      }

      // console.log(trEle);
      // 把trEle放在tbody里面
      // tbodyEle.appendChild(trEle);
      //将这一行提前后delEles数组可以正常计数,第一行可以删除
      function fn() {
        var delEles = document.querySelectorAll(".del");
        console.log(delEles);
        for (let i = 0; i < delEles.length; i++) {
          delEles[i].onclick = function () {
            // this.parentNode.remove();
            console.log(i);
            arr.splice(i, 1);
            this.parentNode.remove();
            console.log(arr);
            fn();
          };
        }
      }
      fn();

    };
  </script>
</body>

</html>